<template>
    <div id="main">
        <!-- 面包屑 -->
        <go-bread :beacklist="beacklist"></go-bread>
        <el-card>
            <el-table :data="rightList" style="width: 100%" border>
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column label="权限名称" prop="authName">
                </el-table-column>
                <el-table-column label="权限路径" prop="path">
                </el-table-column>
                <el-table-column label="权限等级">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.level | types">{{level[scope.row.level]}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>

        </el-card>

    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { GetRightPort, SetRightPort, DelRightPort } from '@/api/rights'
export default {
    data() {
        return {
            rightList: [{}], //权限列表数据
            level: {
                0: '一级',
                1: '二级',
                2: '三级'
            }
        };
    },
    computed: {
        ...mapGetters(['beacklist'])
    },
    created() {
        this.getRightList()
    },
    methods: {
        async getRightList() { //获取权限列表数据
            try {
                let res = await GetRightPort('list')
                // console.log('----', res);
                if (res.meta.status == 200) {
                    this.rightList = res.data
                }
            } catch {
                console.log('---获取角色列表数据');
            }
        },
        editRightBtn() {// 编辑权限按钮

        },
        delRightBtn() {// 删除权限按钮

        }
    },
    filters: {
        types(v) {
            if (v == 0) {
                return ''
            } else if (v == 1) {
                return 'success'
            } else if (v == 2) {
                return 'danger'
            }
        }
    },
    mounted() {

    },
    watch: {

    },
    components: {
    },
};
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    min-width: 1126px;
    height: 100%;
    background: #fff;
}

.el-table {
    margin: 15px 0;
}

.wrapper {
    width: 100%;
    border: 1px solid #999;
    display: flex;

    .box_left {
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #999;
    }

    .box_right {
        width: 100%;
    }

    .box_right_item {
        display: flex;

    }

    .box_right_item_cont1 {
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .box_right_item_cont2 {
        flex: 1;
        border-bottom: 1px solid #999;
        display: flex;
        flex-wrap: wrap;
    }

    .box_right_item_cont1 {
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-tag {
        margin: 15px;
    }

    .bordernone {
        border-bottom: none !important;
    }
}
</style>
